<template>
    <div>
        <h2>门店显示页面</h2>
        <input type="button" value="新增" class="btn btn-primary" @click="add">
        <div>
            门店名称：
            <input type="text" v-model="cc.shopName">
            地区：
            <select v-model="cc.address">
                <option value="">请选择</option>
                <option :value="item.Name" v-for="item in queryInfo.data" :key="item.Id">{{item.Name}}</option>
            </select>
            <input type="button" value="查询" class="btn btn-primary" @click="cha">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>门店名称</td>
                    <td>门店图片</td>
                    <td>联系电话</td>
                    <td>地区</td>
                    <td>详细地址</td>
                    <td>状态</td>
                    <td>开业日期</td>
                    <td>酒店介绍</td>
                    <td>交通指引</td>
                    <td>门店政策</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in aa.list" :key="item.Id">
                    <td>{{item.ShopName}}</td>
                    <td>
                        <img :src="item.Photo" height="100" width="100" alt="">
                    </td>
                    <td>{{item.Phone.substring(0,3)+'****'+item.Phone.substring(7)}}</td>
                    <td>{{item.Address}}</td>
                    <td>{{item.AddressDetail}}</td>
                    <td>{{item.State==0?"是":"否"}}</td>
                    <td>{{moment(item.BeginTime).format('YYYY-MM-DD')}}</td>
                    <td>{{item.Desc}}</td>
                    <td>{{item.Traffic}}</td>
                    <td>{{item.Policy}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)">
                        <input type="button" value="修改" class="btn btn-info" @click="upd(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共{{aa.ZongTiao}}条</span>
        <span>每页{{cc.pageSize}}条</span>
        <span>当前{{cc.pageIndex}}/{{aa.ZongYe}}页</span>
        <select v-model="cc.pageSize" @change="cha">
            <option :value="item" v-for="item in arr" :key="item">每页{{item}}条</option>
        </select>
        <input type="button" value="首页" class="btn btn-primary" @click="goPage(1)">
        <input type="button" value="下一页" class="btn btn-primary" @click="goPage(cc.pageIndex+1)">
        <span v-for="item in aa.ZongYe" :key="item" @click="goPage(item)">{{item}}</span>
        <input type="button" value="上一页" class="btn btn-primary" @click="goPage(cc.pageIndex-1)">
        <input type="button" value="尾页" class="btn btn-primary" @click="goPage(aa.ZongYe)">
        <input type="number" v-model="cc.pageIndex">
        <input type="button" value="跳转" class="btn btn-info" @click="goPage(cc.pageIndex)">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
const router=useRouter();
const route=useRoute();
import moment from 'moment';

//--修改跳转
const upd=(id:any)=>{
    router.push({
        path:'/updShop',
        query:{
            id:id
        }
    })
}

let arr=ref([2,4,6,7])

//删除
const del=(id:any)=>{
   if(confirm('确认删除吗')){
    axios({
        method:'delete',
        url:'/api/Week/DelWeekShop',
        params:{
            id:id
        }
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('成功');
            getshow();
        }
        else{
            alert('失败');
        }
    })
   }
}

//分页
const goPage=(num:any)=>{
    if(num<1){
        cc.pageIndex=1;
        return;
    }
    if(num>aa.ZongYe){
        cc.pageIndex=aa.ZongYe;
        return;
    }
    cc.pageIndex=num;
    getshow();
}

//查询--------
const cha=()=>{
    cc.pageIndex=1;
    getshow();
}

///---------下拉-------
onMounted(()=>{
    getlist();
    getshow();
})

let queryInfo:any=reactive({
    data:[],
})

const getlist=()=>{
axios({
    method:'get',
    url:'/api/Week/GetWeekAddress',
})
.then(res=>{
    console.log(res);
   queryInfo.data=res.data; 
})
.catch(err=>{
    console.log(err);
})
}


//----显示---
let aa:any=reactive({
    list:[],
    ZongTiao:0,
    ZongYe:0
})
let cc:any=reactive({
    pageIndex:1,
    pageSize:2,
    shopName:'',
    address:''
})
const getshow=()=>{
    axios({
        method:'get',
        url:'/api/Week/GetWeekShop',
        params:cc
    })
    .then(res=>{
        console.log(res);
        aa.list=res.data.list;
        aa.ZongTiao=res.data.ZongTiao;
        aa.ZongYe=res.data.ZongYe;

    })
    .catch(err=>{
        console.log(err);
    })
}


const add=()=>{
    router.push('/addShop')
}

</script>

<style scoped>

</style>